<ui:composition xmlns="http://www.w3.org/1999/xhtml"
	xmlns:ui="http://java.sun.com/jsf/facelets"
	xmlns:h="http://java.sun.com/jsf/html"
	template="/template/template.xhtml">
	<ui:define name="head">
		<title>覆冰厚度数据挖掘</title>
	</ui:define>
	<ui:define name="content">
		<div class="full-center-content-scroll-noheader">
			<div class="row">
				<div class="col-md-12">
					<div class="box box-success">
						<div class="box-header with-border">
							<h3 class="box-title">覆冰厚度与故障发生次数关系</h3>
						</div>
						<div class="box-body">
							<div id="iceChart" style="height: 550px;"></div>
						</div>
					</div>
				</div>
			</div>
		</div>
	</ui:define>
	<ui:define name="contentend">
		<script
			src="#{request.contextPath}/resources/plugins/echarts/echarts.js"></script>
		<script>
			$(function() {
				var t1 = window.setInterval(function() {
					var w = $(".row").width();
					if (w != "0") {
						$("#iceChart").width(Number(w) - 50);
						clearInterval(t1);
						$.getJSON('/rest/weatherDataMining/iceHeightAnalysis',
								function(result) {
									drawIceThickChart(result);
								});
					}
				});

			});
			function drawIceThickChart(myWeatherData) {
				var myWeatherChart = echarts.init(document
						.getElementById('iceChart'));
				option = {
					tooltip : {
						trigger : 'axis',
						formatter : function(params) {
							if (params.length != 0) {
								return "覆冰厚度:" + params[0].value[0]
										+ 'cm&lt;br/>' + "故障发生次数:"
										+ params[0].value[1];
							}
						},
						axisPointer : {
							show : true,
							type : 'cross',
							lineStyle : {
								type : 'dashed',
								width : 1
							}
						}
					},
					toolbox : {
						show : true,
						feature : {
							dataZoom : {
								show : true
							},
							dataView : {
								show : true,
								readOnly : false
							},
							restore : {
								show : true
							},
							saveAsImage : {
								show : true
							}
						}
					},
					xAxis : [ {
						type : 'value',
						name : '覆冰厚度',
						scale : true,
						axisLabel : {
							formatter : '{value} cm'
						}
					} ],
					yAxis : [ {
						type : 'value',
						name : '发生次数',
						scale : true,
						axisLabel : {
							formatter : '{value}'
						}
					} ],
					series : [ {
						type : 'scatter',
						data : myWeatherData
					} ]
				};
				// 使用刚指定的配置项和数据显示图表。
				myWeatherChart.setOption(option);
			}
		</script>
	</ui:define>
</ui:composition>